<template>
	<view class="list">
		<view class="item" @click="openDetail(item.id)" v-for="(item, index) in newsList" :key="index">
			<view class="imgBox">
				<image :src="item.img" mode="" lazy-load="true" ></image>
			</view>
			<view class="right">
				<view class="title">{{item.title}}</view>
				<!-- <view class="desc" v-html='item.text'></view> -->
				<rich-text class="desc" :nodes="item.text"></rich-text>
				<view class="time">{{item.create_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {dns} from '@/pages/dns.js'
	export default {
		data(){
			return {
				newsList: [],
				page: 1
			}
		},
		onLoad() {
			this.getNewsList(1);
		},
		onReachBottom:function(e){//监听用户触底事件，上拉加载
			this.page++;
			this.getNewsList(this.page);
		},
		methods:{
			getNewsList(page){//新闻列表
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					method: 'GET',
					data: {
						page,
						limit: 15
					},
					url: dns + 'information/lists',
					success: (res)=> {
						console.log(res)
						uni.hideLoading();
						if(res.data.status == 1){
							res.data.data.forEach((val,ind)=>{
								this.newsList.push(val)
							})
						}
						if(res.data.status == 0 && res.data.msg == "暂无最新消息"){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				})
			},
			openDetail(id){//进入详情
				uni.navigateTo({
				    url: '/pages/index/news/detail/index?id='+id
				});
			}
		}
	}
</script>

<style lang="scss">
	.list{
		padding: 20upx 30upx;
		.item{
			display: flex;
			justify-content: space-between;
			padding: 20upx 0;
			border-bottom: 1px solid #eee;
			.imgBox{
				width: 300upx;
				height: 200upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.right{
				width: 54%;
				position: relative;
				.title{
					font-size: 32upx;
					margin-bottom: 10upx;
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.desc{
					font-size: 24upx;
					color: #afafaf;
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.time{
					position: absolute;
					bottom: -10upx;
					right: 0;
					font-size: 24upx;
					color: #afafaf;
				}
			}
		}
	}
</style>
